﻿@{
    ViewBag.Title = "用户管理";
}

<blockquote class="hidden">
    引用：
    <a href="http://www.oschina.net/translate/a-sample-real-time-web-application-using-ember-js">
        http://www.oschina.net/translate/a-sample-real-time-web-application-using-ember-js
    </a>
</blockquote>
<div class="row">
  <div class="col-md-12">
      <div id="app"></div>
  </div>
</div>

<script type="text/x-handlebars">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="loading">
  <div class="loading">Loading...</div>
</script>

<script type="text/x-handlebars" data-template-name="users">
<!-- Menu -->
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#List">@(ViewBag.Title)列表</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <div class="navbar-form navbar-left">
            <input id="search" type="text" class="form-control" placeholder="Search" {{action "search" on="change"}}>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a {{action "createUser"}}>新增用户</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多操作 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">✓✗</a></li>
                    <li class="divider"></li>
                    <li><a href="#">打印</a></li>
                    <li><a href="#">导出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</nav>
<!-- List -->
<table class="table table-hover table-condensed">
    <colgroup>
        <col class="col-xs-1" />
        <col class="col-xs-2" />
        <col class="col-xs-2" />
        <col class="col-xs-7" />
    </colgroup>
    <thead>
        <tr>
            <th>#</th>
            <th>用户名</th>
            <th>密码</th>
            <th>电子邮件</th>
        </tr>
    </thead>
</table>
{{outlet}}
<table class="table table-hover table-condensed">
    <colgroup>
        <col class="col-xs-1" />
        <col class="col-xs-2" />
        <col class="col-xs-2" />
        <col class="col-xs-7" />
    </colgroup>
    <tfoot>
        <tr>
            <td colspan="4">
                <ul id="pager" class="pagination pull-right">
                    {{#link-to "users.index" "first" tagName="li"}}<span>&laquo;</span>{{/link-to}}
                    {{#link-to "users.index" "prev" tagName="li"}}<span>&lt;</span>{{/link-to}}
                    @*class="disabled"  <span class="sr-only">(current)</span>*@
                    {{#link-to "users.index" "1" tagName="li"}}<span>1</span>{{/link-to}}
                    {{#link-to "users.index" "2" tagName="li"}}<span>2</span>{{/link-to}}
                    {{#link-to "users.index" "3" tagName="li"}}<span>3</span>{{/link-to}}
                    {{#link-to "users.index" "4" tagName="li"}}<span>4</span>{{/link-to}}
                    {{#link-to "users.index" "5" tagName="li"}}<span>5</span>{{/link-to}}
                    {{#link-to "users.index" "next" tagName="li"}}<span>&gt;</span>{{/link-to}}
                    {{#link-to "users.index" "last" tagName="li"}}<span>&raquo;</span>{{/link-to}}
                </ul>
            </td>
        </tr>
    </tfoot>
</table>
</script>

<script type="text/x-handlebars" data-template-name="users/index">
<div class="table-edit">
    {{#each itemController="user"}}
    <table class="table table-hover table-condensed table-striped" data-spy="scroll" data-target="#pager">
        <colgroup>
            <col class="col-xs-1" />
            <col class="col-xs-2" />
            <col class="col-xs-2" />
            <col class="col-xs-7" />
        </colgroup>
        <tbody>
        {{#if _IsEditing}}
        <tr>
            <td>
                <div class="input-sm">
                <a href="#" class="icon-save" title="保存" {{action "saveUser"}}></a>
                </div>
            </td>
            <td>
                {{view Ember.TextField valueBinding="model.UserName" class="form-control input-sm" placeholder="UserName"}}
            </td>
            <td>
                {{view Ember.TextField valueBinding="model.Password" class="form-control input-sm" placeholder="Password"}}
            </td>
            <td>
                {{view Ember.TextField valueBinding="model.Email" class="form-control input-sm" placeholder="Email"}}
            </td>
        </tr>
        {{else}}
        <tr {{action "lookUser" on="doubleClick"}}>
            <td>
                <div class="input-sm">
                {{#unless _IsLock}}
                <a href="#" class="icon-edit" title="编辑" {{action "editUser"}}></a>
                {{/unless}}
                <a href="#" class="icon-remove" title="删除" {{action "deleteUser"}}></a>
                </div>
            </td>
            <td>
                <div class="input-sm">{{UserName}}</div>
            </td>
            <td>
                <div class="input-sm">{{Password}}</div>
            </td>
            <td>
                <div class="input-sm">{{Email}}</div>
            </td>
        </tr>
        {{/if}}
        </tbody>
    </table>
    {{else}}
    <div class="noresult"></div>
    {{/each}}
</div>
</script>

<script type="text/x-handlebars" data-template-name="users/detail">
    {{#link-to 'users.index'}}&lt;&lt;返回{{/link-to}}
    {{UserName}}
</script>

@section Styles {
    @Stylesheet.Render("lhgdialog")
}

@section Scripts {
    @Javascript.Render("json")
    @Javascript.Render("FaScript")
    @Javascript.Render("lhgdialog")
    @Javascript.Render("SignalR")
    <script type="text/javascript" src="/signalr/hubs"></script>
    
    <!-- Ember Application -->
    @Javascript.Render("ember")
    @Javascript.Render("/assets/js/User/Application.js")
    <script type="text/javascript" src="/Models/User"></script>
    @Javascript.Render("/assets/js/User/Router.js")
    @Javascript.Render("/assets/js/User/Controller.js")
}